<template>
    <card class="multilateral bga" title="" style="width: 1040px;height: 558px;">
	        <div class="thistitl">实时窗口服务状态</div>
	        <div class="f-top c-blue wd-tc">{{$store.state.bounceArea}}</div>
	        <div class="f-middle c-yellow wd-tc">{{infoWindow.windowName}}</div>
	        <div class="f-bottom c-blue wd-tc">
	            <p> {{infoWindow.windowShow}}</p>
	        </div>
    </card>
</template>

<script>
    import API from '@/api'
    import { Card } from '@/components/cn/sh/gov/card'
    export default {
        name: 'banjian-realtime',
        components: {
            Card,
        },

        props:['dataType'],
        data () {
            return {
                todayTime:"" ,
                todayDay:"",
                infoWindow:{
                    windowShow: "欢迎光临",
                    windowName: "综合窗口",
                    windowStatus: "FREE",
                    windowNo: "A01"
                },
                infoHallWindows: {
                    A00: {
                        no: 'A00',
                        name: '一口发证'
                    },
                    A01: {
                        no: 'A01',
                        name: '一口发证'
                    },
                    A02: {
                        no: 'A02',
                        name: '开办企业“一窗通”服务专区'
                    },
                    A03: {
                        no: 'A03',
                        name: '开办企业“一窗通”服务专区'
                    },
                    A04: {
                        no: 'A04',
                        name: '开办企业“一窗通”服务专区'
                    },
                    A05: {
                        no: 'A05',
                        name: '开办企业“一窗通”服务专区'
                    },
                    A06: {
                        no: 'A06',
                        name: '机动位'
                    },
                    A07: {
                        no: 'A07',
                        name: '机动位'
                    },
                    A08: {
                        no: 'A08',
                        name: '数字证书'
                    },
                    A09: {
                        no: 'A09',
                        name: '数字证书'
                    },
                    A10: {
                        no: 'A10',
                        name: '数字证书'
                    },
                    A11: {
                        no: 'A11',
                        name: '效能投诉'
                    },
                    B01:{
                        no: 'B01',
                        name: '单一窗口'
                    },
                    B02:{
                        no: 'B02',
                        name: '单一窗口'
                    },
                    B03:{
                        no: 'B03',
                        name: '单一窗口'
                    },
                    B04:{
                        no: 'B04',
                        name: '单一窗口'
                    },
                    B05:{
                        no: 'B05',
                        name: '单一窗口'
                    },
                    B06:{
                        no: 'B06',
                        name: '单一窗口'
                    },
                    B07:{
                        no: 'B07',
                        name: '单一窗口'
                    },
                    B08:{
                        no: 'B08',
                        name: '单一窗口'
                    },
                    B09:{
                        no: 'B09',
                        name: '单一窗口'
                    },
                    B10:{
                        no: 'B10',
                        name: '单一窗口'
                    },
                    B11:{
                        no: 'B11',
                        name: '单一窗口'
                    },
                    B12:{
                        no: 'B12',
                        name: '单一窗口'
                    },
                    B13:{
                        no: 'B13',
                        name: '单一窗口'
                    },
                    B14:{
                        no: 'B14',
                        name: '单一窗口'
                    },
                    B15:{
                        no: 'B15',
                        name: '单一窗口'
                    },
                    B16:{
                        no: 'B16',
                        name: '单一窗口'
                    },
                    B17:{
                        no: 'B17',
                        name: '单一窗口'
                    },
                    B18:{
                        no: 'B18',
                        name: '单一窗口'
                    },
                    B19:{
                        no: 'B19',
                        name: '单一窗口'
                    },
                    B20:{
                        no: 'B20',
                        name: '单一窗口'
                    },
                    B21:{
                        no: 'B21',
                        name: '一口式业务'
                    },
                    B22:{
                        no: 'B22',
                        name: '一口式业务'
                    },
                    B23:{
                        no: 'B23',
                        name: '卫健委'
                    },
                    B24:{
                        no: 'B24',
                        name: '卫健委'
                    },
                    B25:{
                        no: 'B25',
                        name: '民政局'
                    },
                    B26:{
                        no: 'B26',
                        name: '机动位'
                    },
                    C01:{
                        no: 'C01',
                        name: '建设项目(综合专窗)'
                    },
                    C02:{
                        no: 'C02',
                        name: '建设项目(综合专窗)'
                    },
                    C03:{
                        no: 'C03',
                        name: '建设项目(综合专窗)'
                    },
                    C04:{
                        no: 'C04',
                        name: '建设项目(综合专窗)'
                    },
                    C05:{
                        no: 'C05',
                        name: '建设项目(综合专窗)'
                    },
                    C06:{
                        no: 'C06',
                        name: '机动位'
                    },
                    C07:{
                        no: 'C07',
                        name: '绿化市容局'
                    },
                    C08:{
                        no: 'C08',
                        name: '绿化市容局'
                    },
                    C09:{
                        no: 'C09',
                        name: '绿化市容局'
                    },
                    C10:{
                        no: 'C10',
                        name: '机动位'
                    },
                    C11:{
                        no: 'C11',
                        name: '人才公寓申请'
                    },
                    C12:{
                        no: 'C12',
                        name: '房管局'
                    },
                    C13:{
                        no: 'C13',
                        name: '消防'
                    },
                    C14:{
                        no: 'C14',
                        name: '消防'
                    },
                    C15:{
                        no: 'C15',
                        name: '信息公开'
                    },
                    C16:{
                        no: 'C16',
                        name: '信息公开'
                    },
                    C17:{
                        no: 'C17',
                        name: '人社局'
                    },
                    C18:{
                        no: 'C18',
                        name: '机动位'
                    },
                    C19:{
                        no: 'C19',
                        name: '机动位'
                    },
                    C20:{
                        no: 'C20',
                        name: '外国人来华工作许可'
                    },
                    C21:{
                        no: 'C21',
                        name: '外国人来华工作许可'
                    },
                    C22:{
                        no: 'C22',
                        name: '外国人来华工作许可'
                    },
                    C23:{
                        no: 'C23',
                        name: '外国人来华工作许可'
                    },
                    C24:{
                        no: 'C24',
                        name: '预约专窗'
                    }
                },
            }
        },
        mounted(){

        	this.getNowTime();

        	this.getWindow("A00");

        },
        methods: {
            getNowTime() {
                var date = new Date();
                var year = date.getFullYear(); // 年
                var month = date.getMonth() + 1; // 月
                var day  = date.getDate(); // 日
                var hour = date.getHours(); // 时
                var minutes = date.getMinutes(); // 分
                var seconds = date.getSeconds(); //秒
                // 给一位数数据前面加 “0”
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (day >= 0 && day <= 9) {
                    day = "0" + day;
                }
                if (hour >= 0 && hour <= 9) {
                    hour = "0" + hour;
                }
                if (minutes >= 0 && minutes <= 9) {
                    minutes = "0" + minutes;
                }
                var currentdate = year + "年" + month + "月" + day + "日";
                var currenttime  = hour + ":" + minutes ;
                this.todayTime = currenttime;
                this.todayDay = currentdate;
            },

            getWindow(windowNo){
                let _this = this;
                $.ajax({
                    type:"GET",
                    url:"http://12.113.230.5/aci/running/getWindowStatusAtPresent.do?windowNo="+windowNo,
                    dataType:"jsonp",
                    jsonp:"jsonpCallback",
                    success:function(data){
                        console.log(data);
                        _this.infoWindow = data;
                    },
                    error:function(data){
                        //aler("发生错误："+ jqXHR.status);
                    }
                });
            },
        },
        watch: {
        	'$store.state.bounceArea': function (newVal, oldVal) {
                this.getWindow(newVal);

        		$(".multilateral.bga").addClass("antm");
				setTimeout(function(){
					$(".multilateral.bga").removeClass("antm");
				},300);
        	}
        },
    }

</script>
<style lang="less">
    .multilateral{
    	&.bga{
    		background: url(img/min-card.png) no-repeat center/1100px;
    	}
    	.thistitl{
    		font-size: 40px;
    		color: #fff;
    		line-height: 60px;
    		padding-left: 130px;
    		padding-top: 20px;
    	}
        .f-top{
            font-size: 40px;
            line-height: 80px;
            padding-top: 20px;
        }
        .f-middle{
            font-size: 52px;
            line-height: 100px;
        }
        .f-bottom{
            line-height: 100px;
            p{
                display: inline-block!important;
                font-size: 40px;
            }
        }
        &.antm{
        	position: absolute;
			animation:antm .3s ease-in;
		}
		@keyframes antm{
		    0% {
		    	opacity: 0;
	        	top: -30%;
	        	left: -50%;
				transform: scale(.1,.1);
			}
		    15% {
		    	top: -40%;
		    	left: -20%;
				transform: scale(1,1);
			}
		    30% {
		    	top: -26%;
		    	left: 0;
			}
		    45% {
		    	top: -12%;
		    	left: 5%;
			}
		    60% {
		    	top: -7%;
		    	left: 10%;
			}
		    75% {
		    	top: -5%;
		    	left: 7%;
			}
		    90% {
		    	top: -2%;
		    	left: 3%;
			}
		    100% {
		    	opacity: 1;
		    	top: 0;
		    	left: 0;
				transform: scale(1,1);
			}
		}
    }
</style>
